<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>文体活动</title>
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
		<link rel="stylesheet" type="text/css" href="../css/topbo_public.css" />
		<link rel="stylesheet" type="text/css" href="../css/credit.css" />
		<script src="../js/rem.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mock.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/databese.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="activity">
			<div class="toop-public space-between">
				<a href="#" class="reverse">
					<img src="../img/reverse.svg">
				</a>
				<h3 class="title">文体活动</h3>
				<div class="function">
					<img src="../img/function.png">
				</div>
			</div>
			<div class="acti-carousel" id="carousel">
				<ul>
					<li class="acti-list over-hidden"><img src="../img/activity01.jpg" class="car-imgs"></li>
				</ul>
				<ul class="acti-menus space-around">
					<li>
						<div class="images over-hidden">
							<img src="../img/activity01.svg">
						</div>
						<span>野外生存</span>
					</li>
					<li>
						<div class="images over-hidden">
							<img src="../img/activity02.svg">
						</div>
						<span>极限挑战</span>
					</li>
					<li>
						<div class="images over-hidden">
							<img src="../img/activity03.svg">
						</div>
						<span>直播</span>
					</li>
					<li>
						<div class="images over-hidden">
							<img src="../img/activity04.svg">
						</div>
						<span>户外徒步</span>
					</li>
				</ul>
			</div>

			<ul class="acti-content" id="acti-content">
				<li class="content-head">征徒体育·最新活动推荐</li>
				<li class="content-list">
					<div class="cont-images">
						<img class="cont-imgs">
					</div>
					<h6 class="cont-title"></h6>
					<p class="cont-text"></p>
					<div class="space-between">
						<strong class="cont-price"></strong>
						<span>立即报名</span>
					</div>
				</li>
				<li class="content-list">
					<div class="cont-images">
						<img class="cont-imgs">
					</div>
					<h6 class="cont-title"></h6>
					<p class="cont-text"></p>
					<div class="space-between">
						<strong class="cont-price"></strong>
						<span>立即报名</span>
					</div>
				</li>
				<li class="content-list">
					<div class="cont-images">
						<img class="cont-imgs">
					</div>
					<h6 class="cont-title"></h6>
					<p class="cont-text"></p>
					<div class="space-between">
						<strong class="cont-price"></strong>
						<span>立即报名</span>
					</div>
				</li>
				<li class="content-list">
					<div class="cont-images">
						<img class="cont-imgs">
					</div>
					<h6 class="cont-title"></h6>
					<p class="cont-text"></p>
					<div class="space-between">
						<strong class="cont-price"></strong>
						<span>立即报名</span>
					</div>
				</li>
			</ul>

		</div>
		<script type="text/javascript">
			function active() {
				var actiContent = document.getElementById("acti-content");
				var contImgs = actiContent.getElementsByClassName("cont-imgs");
				var contTitle = actiContent.getElementsByClassName("cont-title");
				var contText = actiContent.getElementsByClassName("cont-text");
				var contPrice = actiContent.getElementsByClassName("cont-price");

				mock.activity.forEach(function(obj, index) {
					// console.log(obj);
					console.log(index);
					console.log(obj.actiImags)
					contImgs[index].src = obj.actiImags;
					contTitle[index].innerHTML += obj.listyello;
					contText[index].innerHTML += obj.actiText;
					contPrice[index].innerHTML += obj.price;
				})
			};

			active();
		</script>
	</body>
</html>
